<template>
  <div class="total-container">
    <div v-if="!!topData" class="top-box">
      <div class="item-box" v-for="item in topData" :key="item.title">
        <div class="title">{{ item.title }}</div>
        <div class="subtitle">{{ item.subTitle }}</div>
        <div class="value">
          <div class="num">{{ item.num }}</div>
          <div class="unit">{{ item.unit }}</div>
        </div>
      </div>
    </div>
    <div v-if="!!centerData" class="center-box">
      <div class="item-box" v-for="item in centerData" :key="item.icon">
        <img class="image" :src="item.icon" alt="" />
        <div class="title">{{ item.field_name }}</div>
        <div class="value">
          <div class="num">{{ item.field_value }}</div>
          <div class="unit">{{ item.unit }}</div>
        </div>
      </div>
    </div>
    <div v-if="bottomData.chartData1.data.length && bottomData.chartData2.data.length" class="bottom-box">
      <div class="left-chart">
        <div class="chart-container">
          <pieChart :chart-data="bottomData.chartData1"></pieChart>
        </div>
        <div class="legend">
          <div
            class="item-box"
            v-for="(item, index) in bottomData.chartData1.data"
            :key="item.id"
          >
            <div
              style="display: flex; justify-content: start; align-items: center;"
            >
              <div
                class="left-bar"
                :style="{
                  backgroundColor: bottomData.chartData1.colors[index]
                }"
              ></div>
              <div class="title">{{ item.name }}</div>
            </div>
            <div class="right-value">
              <div class="num">
                {{
                  (
                    100 * item.value /
                    bottomData.chartData1.data.reduce(
                      (acc, current) => acc + current.value,
                      0
                    )
                  ).toFixed(1)
                }}
              </div>
              <div class="unit">%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-chart">
        <div class="chart-container">
          <pieChart :chart-data="bottomData.chartData2"></pieChart>
        </div>
        <div class="legend">
          <div
            class="item-box"
            v-for="(item, index) in bottomData.chartData2.data"
            :key="item.id"
          >
            <div
              style="display: flex; justify-content: start; align-items: center;"
            >
              <div
                class="left-bar"
                :style="{
                  backgroundColor: bottomData.chartData2.colors[index]
                }"
              ></div>
              <div class="title">{{ item.name }}</div>
            </div>
            <div class="right-value">
              <div class="num">
                {{
                  (
                    100 * item.value /
                    bottomData.chartData2.data.reduce(
                      (acc, current) => acc + current.value,
                      0
                    )
                  ).toFixed(1)
                }}
              </div>
              <div class="unit">%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import icon1 from '../../img/right-row2-icon2.png'
import icon2 from '../../img/right-row2-icon4.png'
import pieChart from '../../components/charts/pieChart.vue'
import { getShjzgk, getShjzryzjgk } from '@/api/socialSecurity'
export default {
  data() {
    return {
      icon1,
      icon2,
      topData: null,
      centerData: null,
      bottomData: {
        chartData1: {
          data: [],
          unit: '万人',
          colors: ['#90D7F5', '#F5BA5E']
        },
        chartData2: {
          data: [],
          unit: '亿元',
          colors: ['#90D7F5', '#3FED8B']
        },
        sum1: 0,
        sum2: 0
      }
    }
  },
  components: {
    pieChart
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const topRes = await getShjzgk()
      this.topData = topRes.result.data.map((item) => {
        return {
          title: item.field_name,
          subTitle: '救助人次',
          num: item.field_value,
          unit: '人'
        }
      })
      const [res1, res2, res3, res4] = await Promise.all([
        getShjzryzjgk('首栏', '人数'),
        getShjzryzjgk('首栏', '资金'),
        getShjzryzjgk('饼图分项', '人数'),
        getShjzryzjgk('饼图分项', '资金')
      ])
      this.centerData = [res1.result[0], res2.result[0]]
      this.centerData[0].icon = icon1
      this.centerData[1].icon = icon2
      this.bottomData.chartData1.data = res3.result.map((item, index) => {
        this.bottomData.sum1 += item.field_value
        return {
          name: item.field_name,
          value: +item.field_value,
          id: `chart${index}`
        }
      })
      this.bottomData.sum1 = this.bottomData.chartData1.data.reduce(
        (acc, current) => acc + current.value,
        0
      )
      this.bottomData.chartData2.data = res4.result.map((item, index) => {
        return {
          name: item.field_name,
          value: +item.field_value,
          id: `chart${index + 2}`
        }
      })
      this.bottomData.sum2 = this.bottomData.chartData1.data.reduce(
        (acc, current) => acc + current.value,
        0
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.total-container {
  .top-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item-box {
      width: 107px;
      height: 80px;
      background: url('../../img/right-row2-icon1.png') no-repeat center bottom;
      background-size: 95px 66px;
      .title {
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        font-size: 13px;
        color: #ffffff;
        line-height: 13px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .subtitle {
        font-family: MicrosoftYaHei;
        font-size: 13px;
        color: #ffffff;
        line-height: 13px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-top: 6px;
      }
      .value {
        display: flex;
        justify-content: center;
        align-items: baseline;
        margin-top: 4px;
      }
      .num {
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        font-size: 20px;
        color: #ffde00;
        line-height: 20px;
        text-align: right;
        font-style: normal;
        text-transform: none;
        background: radial-gradient(
          0deg,
          #ffffff 51%,
          #ffe5b9 54%,
          #ffc35b 100%
        );
      }
      .unit {
        font-family: MicrosoftYaHei;
        font-size: 13px;
        color: #ffffff;
        line-height: 13px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-left: 3px;
      }
    }
  }
  .center-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5px;
    .item-box {
      width: 194px;
      height: 50px;
      background: url('../../img/right-row2-icon3.png') no-repeat center bottom;
      background-size: 194px 37px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-bottom: 10px;
      .image {
        height: 42px;
        width: 44px;
      }
      .title {
        width: 70px;
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        line-height: 18px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-left: 6px;
      }
      .value {
        margin-left: 10px;
      }
      .num {
        font-family: YouSheBiaoTiHei;
        font-size: 22px;
        color: #19fdf5;
        line-height: 22px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .unit {
        font-family: MicrosoftYaHei;
        font-size: 12px;
        color: #ffffff;
        line-height: 12px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
  .bottom-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    .left-chart,
    .right-chart {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .chart-container {
        width: 92px;
        height: 92px;
        position: relative;
        background-size: 27px 21px;
        background-size: 27px 21px;
      }
      .chart-container::before {
        content: '';
        position: absolute;
        top: 14px;
        left: 15px;
        width: 61px;
        height: 61px;
        background: url('../../img/right-row2-icon7.png') no-repeat center
          center;
        background-size: 100% 100%;
        animation: rotate 5s linear infinite;
      }
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .legend {
        .item-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;
        }
        .left-bar {
          width: 4px;
          height: 22px;
          border-radius: 2px 2px 2px 2px;
        }
        .title {
          width: 53px;
          font-family: MicrosoftYaHei;
          font-size: 13px;
          color: #ffffff;
          line-height: 18px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          margin-left: 5px;
        }
        .right-value {
          width: 49px;
          height: 41px;
          background: rgba(29, 66, 118, 0.53);
          border-radius: 6px 6px 6px 6px;
          margin-left: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .num {
            font-family: MicrosoftYaHei, MicrosoftYaHei;
            font-weight: bold;
            font-size: 16px;
            color: #ffffff;
            line-height: 16px;
            text-align: right;
            font-style: normal;
            text-transform: none;
          }
          .unit {
            font-family: MicrosoftYaHei;
            font-size: 12px;
            color: #ffffff;
            line-height: 12px;
            text-align: right;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
    .left-chart .chart-container {
      background: url('../../img/right-row2-icon5.png') no-repeat center center;
    }
    .right-chart .chart-container {
      background: url('../../img/right-row2-icon6.png') no-repeat center center;
    }
  }
}
</style>
